<template>
  <div class="home">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
    <!-- {{$store.state.num}} -->
    {{num}}
    {{score}}
    <button @click="handleAdd">按钮+10</button>
    <button @click="handleCityList">添加城市列表</button>
    <h2>{{cityList}}</h2>
    <h3>{{$store.getters.CityListLen}}</h3>
    <!-- <h3>{{$store.getters.filterCityList}}</h3> -->
    <h3>{{filterNan}}</h3>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue';
import {mapState,mapMutations,mapActions,mapGetters} from 'vuex';

export default {
  name: 'Home',
  data () {
    return {
      n:1,
    }
  },
  components: {
    HelloWorld
  },
  //写法一：
  // computed:{
  //   num(){
  //     return this.$store.state.num;
  //   },
  //   cityList(){
  //     return this.$store.state.cityList;
  //   },
  //   filterNan(){
  //     return this.$store.getters.filterCityList;
  //   }
  // },
  // computed:mapState({
  //   //写法二：
  //   // num:(state)=>state.num,

  //   //写法三：'num'解析成'(state)=>state.num'
  //   // num:'num',

  //   //写法四：这种写法可以拿到data里的数据，所以要用到this,所以不能用箭头函数
  //   // num(state){
  //   //   return state.num+this.n;
  //   // }
  // }),
  //写法五 映射 this.num 为 store.state.num
  // computed:mapState(['num','score']),
  //写法六: 展开运算符的写法
  computed:{
    ...mapState({
      num:'num',
      cityList:'cityList',
      score:(state)=>state.score,
    }),
    //getters的写法一:
    // ...mapGetters({
    //   cityListLen: 'cityListLen',
    // }),
    //getters的写法二:
    ...mapGetters(['cityListLen', 'filterCityList']),
  },
  methods:{
    // mutations写法一:
    // handleAdd(){
    //   this.$store.commit('add',10);  //add对应store里index.js里mutations里的add 10是add里payload
    // },
    // mutations写法二:
      ...mapMutations({
          handleClick: 'add',
      }),

    // 写法三:
    //...mapMutations(['add']),  //要用这种方法要将上面的@click="handleClick"的handleClick改为add

    // actions写法一:
    // handleCityList(){
    //   this.$store.dispatch('getCityList');
    // }

    // actions写法二:
    ...mapActions({
        handleCityList: 'getCityList',
    }),

    // actions写法三:
    //...mapActions(['getCityList']), //要用这种方法要将上面的@click="handleCityList"的handleCityList改为getCityList
  }
}
</script>
